
<template>
  <view>
    <view
      @click="goDetail(item)"
      :key="index"
      v-for="(item, index) in list1"
      class="lisBox"
    >
      <view class="liBox">
        <view class="lis">
          <view class="tit">
            {{ item.title }}
          </view>
          <view class="cont">
            出售价格：{{ item.buy_price }}
            元
          </view>
          <view class="see"> 发布时间：{{ item.add_time }} </view>
          <view class="cont dif">
            交易状态：
            <view class="switchBar">
              <u-switch
                v-model="item.checked"
                size="30"
                class="icon"
                @change="change($event,item)"
                active-color="#1684fd"
                inactive-color="#eee"
              ></u-switch>


              <text class="yes" v-if="item.checked == 1"> 已成交</text>
              <text class="no" v-else>未成交</text>
            </view>
          </view>
        </view>

        <view class="bottom">
          <view class="bottom">
            <view @click="edit(item)" class="evaluate btn"
              ><u-icon class="icon" name="eye-fill"></u-icon>查看</view
            >
            <view @click="del(item)" class="del btn"
              ><u-icon class="icon" name="trash-fill"></u-icon>删除</view
            >
          </view>
        </view>
      </view>
    </view>
    <u-modal
      @confirm="confirm"
      :mask-close-able="true"
      :show-cancel-button="true"
      v-model="modalMask"
      content="确定删除?"
    ></u-modal>
  </view>
</template>

<script>
	import api from '../../../../api/routes.js'
export default {
  props: ["list", "gowhere"],
  data() {
    return {
      modalMask: false,
      id: undefined,
      checked: true,
      list1: [],
    };
  },
  watch: {
    list(n) {
      this.list1 = this.list;
      this.list1.map((i) => {
        this.$set(i, "checked", i.buy_state?true:false);
      });
    },
  },

  methods: {
   async change(e,value) {

      let buyState = e?1:0

       const res = await this.$myRequest({
        url: api.updateBuyState,
        method: "GET",
        data: { id: value.id,buyState },
      });
      console.log(res,4444);
      if (res.data.code == 0) {
        uni.showToast({
          title: "修改成功",
          duration: 1000,
        });

        
        this.$emit("refrash", 1);
      }
    },
    edit(row) {
      
      uni.navigateTo({
        url: `/package/pages/release/secondHandLook?id=${row.id}&reload=1`,
      });
    },
    confirm() {
      this.FnDel();
    },
    async FnDel() {
      const res = await this.$myRequest({
        url: api.delSecondBuy,
        method: "GET",
        data: { id: this.id },
      });
      if (res.data.code == 0) {
        uni.showToast({
          title: "删除成功",
          duration: 1000,
        });
        this.modalMask = false;
        this.$emit("refrash", 1);
      }
    },
    del(row) {
      this.id = row.id;
      this.modalMask = true;
    },
    goDetail() {
      if (this.gowhere) {
        uni.navigateTo({
          // url: './main'
          url: "/package/pages/searchJob/list/detail",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.switchBar {
  display: flex;
  align-items: center;
  .icon {
    margin-right: 3px;
  }
}
.no {
  color: #999;
}
.yes {
  color: #1684fd;
}
.liBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bottom {
  padding: 0 10rpx;
  .btn {
    height: 52rpx;
    width: 150rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 26rpx;
    border: 2rpx solid $u-border-color;
    font-size: 24rpx;
    text-align: center;
    color: $u-type-info-dark;
    margin-bottom: 10px;
    color: #ffffff;
    .icon {
      margin-right: 4px;
    }
  }
  .evaluate {
    background: $uni-color-warning;
  }
  .del {
    background: $uni-color-error;
  }
}
.lisBox {
  background: #ffffff;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  padding: 32rpx 10rpx 32rpx 32rpx;
}

.lis {
  flex: 1;
  .tit {
    text-align: justify;
    line-height: 42rpx;
    margin-bottom: 15rpx;
    font-size: 14px;
    font-weight: bold;
    color: #333333;
  }
  .cont {
    font-size: 12px;
    color: #777;
    line-height: 35rpx;
    &.dif {
      display: flex;
      align-items: center;
      margin: 5px 0 0 0;
    }
  }
  .see {
    font-size: 12px;
    color: #999;
    display: flex;
    align-items: center;
    .icon {
      margin-right: 3px;
    }
  }
}
</style>
